import React, { useState } from 'react';
import { View, Text, Image, StyleSheet, Switch } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import SeekBar from './SeekBar';
import Slider from '@react-native-community/slider';
import ValueInput from './ValueInput';
import InputModal from './InputModal';
import NewAppModal from './NewAppModal';
import SettingScrollView from './SettingScrollView';
import UpdateModal from './UpdateModal';
import LoadModal from './LoadModal';

const ItemHRow = ({ data, clickAction, sliderWithIndex, onNeedRefTC }) => {
  const toggleSwitch = value => {
    console.log(value);
  };
  var rightView;
  switch (data.type) {
    // case 0:
    //   rightView = (
    //     <Image
    //       source={require('../images/icon_sinto.png')}
    //       style={{height: 10, width: 5}}
    //     />
    //   );
    //   break;
    case 0:
      rightView = (
        <Switch
          trackColor={{ false: "#A1A7B3", true: "#A1A7B3" }}
          thumbColor={data.sv ? '#CFFF36' : '#FFF'}
          ios_backgroundColor={'#A1A7B3'}
          onValueChange={clickAction}
          // disabled={false}
          value={data.sv}
        />
      );
      break;
    case 2:
      rightView = (
        <View
          style={{ flex: 1, flexDirection: 'row-reverse', alignItems: 'center' }}>
          <Image
            source={require('../images/icon_sinto.png')}
            style={{ height: 24, width: 24 }}
          />
          <View>
            <Text
              style={styles.text}>
              {data.sv}
            </Text>
          </View>
        </View>
      );
      break;
    case 1:
      rightView = (
        <View
          style={{ flex: 1, flexDirection: 'row-reverse', alignItems: 'center' }}>
          <Image
            source={require('../images/icon_sinto.png')}
            style={{ height: 24, width: 24 }}
          />
          <View
            style={{
              marginRight: 10,
              justifyContent: 'center',
              flexDirection: 'column',
            }}>
            <Text
              style={{
                fontSize: 16,
                color: '#B2B4BB',
                // includeFontPadding: false,
                // textAlignVertical: 'center',
              }}>
              {data.sv} {data.unit}
            </Text>
          </View>
        </View>
      );
      break;
    case 3:
      rightView = (
        <View>
          <Text
            style={styles.text}>
            {data.sv}
          </Text>
        </View>
      );
      break;
    default:
      break;
  }

  const [tmpV, setTmpV] = useState(data.sv ? Number(data.sv) : 0);

  if (data.type == 1) {
    return (
      <View
        style={{
          flex: 1,
          height: 90,
          paddingHorizontal: 20,
          backgroundColor: '#DDDDDD',
          borderBottomColor: '#BDBDBD',
          borderBottomWidth: StyleSheet.hairlineWidth,
        }}>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <Text style={styles.text}>{data.des}</Text>
          <Text style={styles.text}>{tmpV}{data.unit}</Text>
        </View>
        {/* <SeekBar
          style={{ flex: 2 }}
          min={0}
          max={100}
          unit={'%'}
          progress={tmpV}
          progressHeight={4}
          progressBackgroundColor="#A1A7B3"
          progressColor="#CFFF36"
          thumbSize={20}
          thumbColor="#CFFF36"
          thumbColorPressed="#FFF"
          onStartTouch={() => onStartTouch()}
          onStopTouch={progress => {
            // setLsline(Math.round(progress));
            setTmpV((progress).toFixed(0));
            sliderWithIndex(Math.round(progress));
          }}
        /> */}

        <Slider
          style={{ flex: 2, height: 40 }}
          minimumValue={0}
          maximumValue={100}
          step={1}
          value={tmpV}
          minimumTrackTintColor="#CFFF36"
          // maximumTrackTintColor="#000000"
          maximumTrackTintColor="#A1A7B3"
          onValueChange={(value) => {
            setTmpV(value);
            sliderWithIndex(value);
          }}
          thumbTintColor='#CFFF36'
        />

      </View>
    );
  }

  else if (data.type == 5) {
    return (
      <View
        style={{
          flex: 1,
          height: 90,
          paddingHorizontal: 20,
          backgroundColor: '#DDDDDD',
          borderBottomColor: '#BDBDBD',
          borderBottomWidth: StyleSheet.hairlineWidth,
        }}>
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <Text style={styles.text}>{data.des}</Text>
          <Text style={styles.text}>{tmpV}{data.unit}</Text>
        </View>
        {/* <SeekBar
          style={{ flex: 2 }}
          // type={5}
          min={0}
          max={20}
          unit={'/20'}
          progress={tmpV}
          progressHeight={4}
          progressBackgroundColor="#A1A7B3"
          progressColor="#CFFF36"
          thumbSize={20}
          thumbColor="#CFFF36"
          thumbColorPressed="#FFF"
          onStartTouch={() => onStartTouch()}
          onStopTouch={progress => {
            // setLsline(Math.round(progress));
            setTmpV(Math.round(progress));
            sliderWithIndex(Math.round(progress));
          }}
        /> */}

        <Slider
          style={{ flex: 2, height: 40 }}
          minimumValue={0}
          maximumValue={20}
          step={1}
          value={tmpV}
          minimumTrackTintColor="#CFFF36"
          // maximumTrackTintColor="#000000"
          maximumTrackTintColor="#A1A7B3"
          onValueChange={(value) => {
            setTmpV(value);
            sliderWithIndex(value);
          }}

          onSlidingComplete={value => {
            // setTmpV(value);
            // sliderWithIndex(value);
            onNeedRefTC(value);
          }}
          // onValueChange={val => setSliderBrightness(val)}

          thumbTintColor='#CFFF36'
          tapToSeek={false}
        />
      </View>
    );
  } else {
    return (
      <TouchableOpacity activeOpacity={1} onPress={() => clickAction()}>
        <View
          style={{
            flex: 1,
            height: 60,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingHorizontal: 20,
            backgroundColor: '#DDDDDD',
            borderBottomColor: '#BDBDBD',
            borderBottomWidth: StyleSheet.hairlineWidth,
          }}>
          <Text style={styles.text}>{data.des}</Text>
          <View>
            {rightView}
          </View>
        </View>
      </TouchableOpacity>
    );
  }

};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#060606',
    fontWeight: "400",
    fontFamily: 'Moldiv',
    // includeFontPadding: false,
    // textAlignVertical: 'center'
  }

})

export { ItemHRow, SeekBar, ValueInput, InputModal, SettingScrollView, UpdateModal, NewAppModal,LoadModal };
